<template>
	<!-- 学校基本信息 -->
	<div class="sub-content-info">
		<div class="title1">地震走势</div>
		<div>
			<div class="job-data">
				<div style="padding-left:11px;padding-top:6px;">
					<div class="job-subtitle">近1年内</div>
					<div>
						<span class="job-icon"><img src="@/assets/img/triangle.png" alt=""></span>
						<span class="job-text">地震数量</span>
						<span class="job-num">{{this.eqrCount}}次</span>
					</div>
					<div>
						<span class="job-icon"><img src="@/assets/img/triangle.png" alt=""></span>
						<span class="job-text">预警率</span>
						<span class="job-num">{{this.eewPercent}}%</span>
					</div>
				</div>
			</div>
			<div class="bar-chart" id="barChart" style="width: 450px;height:250px;"></div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'eqcountContent3',
	data() {
		return {
			yearCountData: [['job', '地震预警', '地震速报']], //每月统计的数据列表
			myChart: null,
			eqrCount: 0, //地震速报数量
			eewPercent: 0, //地震预警率
		}
	},
	methods: {
		updagteCountData(lastEqTotalCountDataRawList){
			this.yearCountData =  [['类型', '地震预警', '地震速报']]
			//更新数据
			var tempCountDataList = []
			var lastEqrTotalCountDataDict = lastEqTotalCountDataRawList["eqr"]['eqr_count_by_month']
            var lastEewTotalCountDataDict = lastEqTotalCountDataRawList["eew"]['eeq_count_by_month']
			var lastTotalDataDict = lastEqTotalCountDataRawList["total"]
			this.eqrCount = lastTotalDataDict["eq_total"]
			this.eewPercent = lastTotalDataDict["eew_percent"]

			for (var key in lastEqrTotalCountDataDict) {
				var eqr_month_count = lastEqrTotalCountDataDict[key]
				var eew_month_count = lastEewTotalCountDataDict[key]
				tempCountDataList.push([key,  eew_month_count, eqr_month_count])
			}
			this.yearCountData = this.yearCountData.concat(tempCountDataList.reverse())
			//console.log(this.yearCountData)

			this.updateBarChart();
		},
		initBarChart(){
			//直接引用进来使用
			var echarts = require('echarts');
			// 基于准备好的dom，获取main节点init初始化echarts实例
			this.myChart = echarts.init(document.getElementById('barChart'));
			this.updateBarChart();
		},
		//取得就业率柱状图数据
		updateBarChart() {
			// 指定图表的配置项和数据
			var option = {
				legend: {
					padding: 8,
					textStyle: {
						color: '#ffffff',
						fontSize: 12,
						padding: 5,
					},
					itemWidth: 30,                               //图例标记的图形宽度
					itemHeight: 15,
					itemGap: 10,
				},
				grid: {
					top: 0
				},
				tooltip: { show: false },
				dataset: {
					source: this.yearCountData
				},
				xAxis: {
					type: 'category',
					axisLabel: {
						textStyle: {
							color: '#ffffff',
							fontSize: 12,
						}
					},
				},
				yAxis: {
					splitLine: { show: false },
					axisLabel: { show: false }
				},
				series: [
					{
						type: 'bar',
						itemStyle: {
							normal: {
								color: '#67aab4'
							}
						}
					},
					{
						type: 'bar',
						itemStyle: {
							normal: {
								color: '#539aff'
							}
						}
					},
				],
				animation: true,
				animationThreshold: 2500,       // 动画元素阀值，产生的图形原素超过2500不出动画
				addDataAnimation: true,         // 动态数据接口是否开启动画效果
				animationDuration: 3000,
				animationEasing: 'ExponentialOut'    //BounceOut
			};
			// 使用刚指定的配置项和数据显示图表。
			this.myChart.setOption(option);
			this.myChart.clear()
			this.myChart.setOption(option)
		},
	},
	mounted() {
		this.initBarChart();
	},
}
</script>
<style>
.sub-content-info .title1 {
	font-family: SourceHanSansCN-Bold;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 34px;
	letter-spacing: 1px;
	color: #b1eded;
	margin-top: 10px;
	background: url(@/assets/img/sub_title_bg.png);
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	width: 300px;
	height: 38px;
  margin-bottom: 10px;
  padding-left: 10px;
}

/* 分割线 */
.divider {
	height: 1px;
	background-color: #528693;
	width: 100%;
}

.sub-content-info .job-data,
.sub-content-info .marjor-rate {
	width: 120px;
	height: 75px;
	background: url(../../../assets/img/job-bg.png);
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	margin-bottom: 30px;
}

.sub-content-info .job-subtitle {
	font-size: 14px;
	letter-spacing: 1px;
	color: #b3f7f4;
}

.sub-content-info .job-icon img {
	width: 7px;
	height: 7px;
}

.sub-content-info .job-text {
	font-size: 12px;
	color: #b3f7f4;
	padding: 0 6px;
}

.sub-content-info .job-num {
	font-size: 12px;
	color: #ffffff;
}

.sub-content-info .static {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.sub-content-info .static img {
	width: 14px;
	height: 14px;
}
</style>